<template>
  <view class="page">
    <nav-bar color="white" bg-color="black" title="设置" show-back></nav-bar>

    <view class="page-conten">
      <u-grid col="4" :border="false">
        <u-grid-item name="gridName" v-for="(item, index) in settingItem" :key="item.icon">
          <view @click="tapItem(item)" class="flex flex-col justify-center items-center grit-items">
            <view>
              <u-icon
                v-if="item.iconSuffix"
                :name="item.icon"
                :custom-prefix="item.iconSuffix"
                size="20rpx"
                bold
                color="black"
              ></u-icon>
              <u-icon
                v-else
                :name="item.icon"
                size="20rpx"
                bold
                color="black"
              ></u-icon>
            </view>

            <view class="title">
              <u-text :text="item.title" type="info" size="10rpx" align="center"></u-text>
            </view>
          </view>
        </u-grid-item>
      </u-grid>
    </view>
  </view>
</template>

<script setup>
import { onReady } from "@dcloudio/uni-app";
import { onMounted, ref } from "vue";
import { useStore } from "vuex";

const settingItem = ref([
  {
    icon: "account",
    title: "商家信息",
    path: "/pages/subHome/user/index",
  },
  {
    icon: "toggleswitch",
    iconSuffix: "iconzhucan",
    title: "功能设置",
    path: "/pages/subSetting/setting/app-setting",
  },
  {
    icon: "grid",
    title: "模式切换",
    path: "./mode-change/index",
  },
  {
    icon: "coupon",
    title: "设备连接",
    path: "/pages/subSetting/device-connect/device-connect",
  },
  {
    icon: "question-circle",
    title: "帮助中心",
    path: "/pages/subFeeback/feedback/feedback",
  },
  {
    icon: "info-circle",
    title: "账号设置",
    path: "/pages/subSetting/setting/account",
  },
  {
    icon: "more-circle",
    title: "应用信息",
    path: "/pages/subSetting/setting/app-info",
  },
]);

/** 列表项点击 */
const tapItem = (item) => {
  if (item.func) {
    item.func(item);
  } else {
    uni.navigateTo({ url: item.path });
  }
};

const store = useStore();

onReady(() => {
  try {
    // 根据当前模式加载菜单 如果是自由模式，只显示切换
    const currMode = store.getters.consumptionPattern;
    console.log("当前模式菜单xxx", currMode, currMode == 3);
    if (currMode == 3) {
      // 无鉴权模式只显示切换模式 这个菜单
      // console.log("更新设置菜单");
      settingItem.value = settingItem.value.filter((item) => item.title == "模式切换");
    }
  } catch (error) {
    console.error("获取模式失败", error);
  }
});

// onMounted(() => {});
</script>

<style lang="scss" scoped>
.page {
  background-color: #ffffff;
  height: 100%;
  display: flex;
  flex-direction: column;
  .page-conten {
    padding: 20rpx;
    width: 70vw;
    margin: auto;
    align-self: center;
  }
}

.grit-items {
  background-color: #f5faff;
  width: 15vw;
  height: 15vw;
  margin-top: 10rpx;
  border: 1px solid #c2c2c2;
  border-radius: 10rpx;
  box-sizing: border-box;

  .title {
    margin-top: 10rpx;
  }
}
</style>
